<template >
	<view class="content bg-white">
		<!-- 顶部 -->
		<view v-if="nbook.title">
			<view class="radius bg-gradual-blue">
				<view class="flex justify-around padding-top-xl padding-lr-xl" >
					<view style="width: 20%;">
						<image :src="nbook.cover" mode="widthFix"></image>
						<view class="margin-right-sm cu-tag bg-brown" style="width:100%; font-size: 20upx;">{{nbook.minorCateV2}}</view>
					</view>
					<view class="margin-left-sm" style="width: 75%;">
						<view class="flex" >
							<view class="text-left ne-title text-cut" style="line-height: 60upx;">{{nbook.title}}</view>
						</view>
						<view style="font-weight: 100;font-size: 24upx;">
							<view style="line-height: 53upx;">{{nbook.author}}</view>
							<view class="text-cut" style="line-height: 48upx;">{{nbook.lastChapter}}</view>
							<view class="text-cut flex" style="line-height: 48upx;font-size: 32upx;margin-top: 10upx;float: right;" @click="goOn(nbook.id)">
								继续阅读<view class="icon-roundrightfill" style="font-size: 32upx;margin-left: 10upx;"></view>
							</view>
						</view>
					</view>
				</view>
				<image src="https://image.weilanwl.com/gif/wave.gif" mode="scaleToFill" class="gif-black response" style="height:60upx;"></image>
			</view>
		</view>
		
		<!-- 书架列表 -->
		<view class="flex justify-between margin-lr-xl solid-bottom align-center" style="height: 220upx;padding:30upx 0upx" v-for="(item,index) in list" :key="index" @click="goOn(item.id)">
			<image lazy-load="true" :src="item.cover" mode="widthFix" style="width: 18%;" class="shadow"></image>
			<view style="width: 75%;padding:10upx 0" >
				<view class="flex justify-between">
					<view class="text-bold text-lg">{{item.title}}</view>
					<view class="text-gray cuIcon-delete" style="font-size: 36upx;line-height: 60upx;" @click.stop @click="dele(item.id)"></view>
				</view>
				<view class="text-sm text-gray text-cut" style="line-height: 45upx;">{{item.lastChapter}}</view>
				<view class="text-sm text-gray text-cut" style="line-height: 45upx;">
					<text v-if="history[index].cid > 0">{{item.lastcid-history[index].cid}}章未读</text>
					<text v-else-if="history[index].cid - item.lastcid == 0">已读至最新章节</text>
					<text v-else-if="history[index].cid == 0">未读过</text>
				</view>
			</view>
		</view>
		
		<view v-if="list.length < 1" style="position: fixed;top: 250px;width: 100%;">
			<view class="bg-white flex-sub radius">
				<image src="https://image.weilanwl.com/gif/loading-white.gif" mode="aspectFit" class="gif-white response" style="height:300upx"></image>
			</view>
		</view>
		
		<view style="height: 50px;"></view>
		
		<!-- 底边栏 -->
		<bottom-bar :TabCar="'0'"></bottom-bar>
	</view>
</template>

<script>

	var that;
	// #ifdef H5
	const wx = require('weixin-js-sdk')
	// #endif
	var nowbook;
	export default {
		data() {
			return {
				member:null,
				list : [],
				nbook : [],
				history : []
			}
		},

		onLoad(){ 
			that = this
		},
		
		async onShow() {
			that = this
			nowbook = uni.getStorageSync('nowbook');
			that.util.request({
				'url' : 'VueTheBook',
				'data' : {
					id : nowbook.id
				},
				showLoading:false,
				success:function(res){
					that.nbook = res.data.data
				}
			})
			

			// #ifdef APP-PLUS
			var keyNames=[];
			var values=[];
			var numKeys=plus.storage.getLength();
			for(var i=0; i<numKeys; i++) {
				keyNames[i] = plus.storage.key(i);
				values[i] = plus.storage.getItem(keyNames[i]);
			}
			var data = keyNames
			// #endif
			
			// #ifdef H5 || MP-WEIXIN
				var keyNames = uni.getStorageInfoSync()
				var data = keyNames.keys
			// #endif

			var blist = await that.util.get('VueIndex',{data})

			if (!blist) {
				uni.switchTab({
					url: '/pages/concourse/concourse'
				});
			}
			var his = []
			if (blist) {
				for (let i = 0; i < blist.length; i++) {
					var history = uni.getStorageSync(blist[i].id);
					his.push(history)
				}
				that.list = blist
				that.history = his
			}
		},
		
		async onReady() {
			uni.hideTabBar()
			var setting = await that.util.setting()
			// #ifdef H5
			var wx = await that.util.jssdk() 
			wx.ready(function () {	
				var sharedata = {
					title: setting.share_title,
					desc: setting.share_desc,
					imgUrl: setting.share_thumb,
					success: function(){
						
					},
					cancel: function(){							
					}
				};
				wx.onMenuShareAppMessage(sharedata);
				wx.onMenuShareTimeline(sharedata);						
			});
			// #endif
		},

		methods: {
			dele(e){
				uni.removeStorage({
					key: e,
					success: function (res) {
						var list = that.list
						for (let i = 0; i < list.length; i++) {
							if (list[i].id == e) {
								list = list.splice(i,1);
							}
						}
					}
				});
				
				if (nowbook.id == e) {
					uni.removeStorage({
						key: 'nowbook',
						success: function (res) {
							that.nbook = []
						}
					});
				}
				
			},
			
			goOn(e){
				that = this
				var history = uni.getStorageSync(e);
				uni.navigateTo({
					url: '/pages/read/read?nid='+history.nid+'&cid='+history.cid+'&id='+e+'&lastcid='+that.nbook.lastcid
				});
			},
		},
	}
</script>

<style>
	@import "../../colorui/animation.css";
	page{background-color:#ffffff;}
	image[class*="gif-"] {
		/* border-radius: 6upx; */
		display: block;
	}
	.ne-title {
		font-size: 32upx;font-weight: 530;line-height: 40upx;
		max-width: 400upx;
		margin-right: 10upx;
	}
	
	.text-cut {
		white-space: nowrap;overflow: hidden;text-overflow:ellipsis; 
	}
	
</style>
